<template>
    <div v-if="alignBuild" class="goods">
        <div class="g_header">
            <image @click="go1()" src="../web/img/header-01.png" style="width:40px;height:80px;margin-left:24px;"></image>
            <div class="h_meun">
                <text id="one" class="meun m_active" @click="pageGo1($event)">商品</text>
                <text id="two" class="meun" @click="pageGo2($event)">详情</text>
            </div>
            <div></div>
        </div>
        <div class="g_secer">
            <!--商品轮播-->
            <indexCarousel :carouselAuto="carouselAuto"></indexCarousel>
            <!--商品-->
            <div class="goods_txt">
                <text class="g_name">标准洗车SUV/MPV</text>
                <div class="g_price">
                    <text class="new">￥40</text>
                    <div class="old">
                        <text class="tt1">原价</text>
                        <text class="tt2">￥120</text>
                    </div>
                </div>
                <!--选择数量-->
                <text class="g_choose_num">已选 1 件</text>
                <!--提示信息-->
                <goodsServes></goodsServes>
                <!--店铺信息-->
                <div class="shopMsg">
                    <div class="s_title">
                        <text class="dpuMsg">店铺信息</text>
                        <text class="dpuSee" @click="go3()">进店看看</text>
                    </div>
                    <div class="shop_more_msg" @click="go3()">
                        <image src="../web/img/logo.png" style="width:108px;height:108px;border-radius: 50%;"></image>
                        <div class="shop_more_msg_text">
                            <text class="shop_more_msg_text_name">嘟嘟的水果小铺</text>
                            <text class="shop_more_msg_text_path">陕西省西安市雁塔区高新2路111号</text>
                        </div>
                    </div>
                </div>
                <!--商品详情-->
                <div class="goods_more_info">
                    <a name="go" class="goods_more_info_title">商品详情</a>
                    <image style="width:702px;height:390px;text-align:center" src="../web/img/logo.png"></image>
                    <image style="width:702px;height:390px;margin:0 auto" src="../web/img/logo.png"></image>
                </div>
                <!--猜你喜欢-->
                <div class="goods_your_like">
                    <text class="goods_your_like_title">猜你喜欢</text>
                    <div class="goods_your_like_dbox">
                        <ul class="goods_your_like_box">
                            <li @click="go2($event)" v-for="i in thinkYourLike" class="goods_your_like_goods">
                                <image :src="i.img" style="width:264px;height:180px;"></image>
                                <text class="goods_your_like_goods_name">{{i.name}}</text>
                                <text class="goods_your_like_goods_price">￥{{i.price}}</text>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="g_footer">
            <div class="g_footer_ico">
                <div class="g_footer_ico_box">
                    <image style="width:34px;height:34px;margin-top:10px;" src="../web/img/shop_store_shopping_tab_shoppingcai.png"></image>
                    <text class="g_footer_ico_box_text">购物车</text>
                </div>
                <div class="g_footer_ico_box">
                    <image style="width:34px;height:34px;margin-top:10px;" src="../web/img/shop_store_shopping_tab_massage.png"></image>
                    <text class="g_footer_ico_box_text">消息</text>
                </div>
                <div class="g_footer_ico_box">
                    <image style="width:34px;height:34px;margin-top:10px;" src="../web/img/shop_store_shopping_tab_shopstore.png"></image>
                    <text class="g_footer_ico_box_text">店铺</text>
                </div>
            </div>
            <div class="g_footer_buyOrAdd">
                <text class="g_footer_buyOrAdd_ add">加入购物车</text>
                <text class="g_footer_buyOrAdd_ buy">立即购买</text>
            </div>
        </div>
    </div>
</template>

<script>
    // var stream = weex.requireModule('stream');
    import indexCarousel from "../src/components/indexPage/indexCarousel"
    import goodsSellPrompt from "../src/components/goods/goodsSellPrompt"
    import goodsServes from "../src/components/goods/goodsServes"
    export default {
        name: "goods",
        components:{
            indexCarousel,
            goodsSellPrompt,
            goodsServes,
        },
        data(){
            return{
                carouselAuto:false,
                thinkYourLike:[
                    {
                        img:"../web/img/logo.png",
                        name:"手扶拖拉机扶手、轮胎、保养。",
                        price:1989
                    },
                    {
                        img:"../web/img/logo.png",
                        name:"回收拖拉机、大拖拉机‘小拖拉机等",
                        price:1989
                    },
                    {
                        img:"../web/img/logo.png",
                        name:"手扶拖拉机扶手、轮胎、保养",
                        price:1989
                    },
                    {
                        img:"../web/img/logo.png",
                        name:"手扶拖拉机扶手、轮胎、保养",
                        price:1989
                    },
                    {
                        img:"../web/img/logo.png",
                        name:"手扶拖拉机扶手、轮胎、保养",
                        price:1989
                    },
                    {
                        img:"../web/img/logo.png",
                        name:"手扶拖拉机扶手、轮胎、保养",
                        price:1989
                    },
                    {
                        img:"../web/img/logo.png",
                        name:"手扶拖拉机扶手、轮胎、保养",
                        price:1989
                    },
                    {
                        img:"../web/img/logo.png",
                        name:"手扶拖拉机扶手、轮胎、保养",
                        price:1989
                    },

                ],
                alignBuild:true,
            }
        },
        methods:{
            pageGo1(e){
                var secbody = document.getElementsByClassName("g_secer")[0];
                secbody.scrollTop=0;
                // console.log(e.target.innerHTML);
                e.target.className="meun m_active";
                document.getElementById("two").className="meun";
            },
            pageGo2(e){
                var secbody = document.getElementsByClassName("g_secer")[0];
                var goodsdetailedinformation = document.getElementsByClassName("goods_more_info")[0];
                secbody.scrollTop=goodsdetailedinformation.offsetTop;
                // console.log(e.target.innerHTML);
                e.target.className="meun m_active";
                document.getElementById("one").removeAttribute("class");
                document.getElementById("one").className="meun";
            },
            go1(){
                this.$router.back(-1);
            },
            go2(e){
                this.alignBuild=false;
                // stream.fetch(
                //     {},(ret)=>{
                //         // 商品页跳转判断（服务类/实体类）
                //         if(ret.data.data.xx===xx){
                //          //若是实体类跳转路由
                //             this.router.push("/goodsSell")
                //         }else if(ret.data.data.xxx===xxx){
                //         // 若是当前服务类页面 则重新赋值构建组件
                //                 alignBuild=true;
                //         }
                //     },function(){}
                // )

                // this.$router.push("/goodsServe");
                // this.$router.push("/goodsSell");
            },
            go3(){
                this.$router.push("/shop")
            },
        },
        mounted:function(){
            let goodsTitle = document.getElementsByClassName("goods_your_like_goods_name");
            for(let i in goodsTitle){
                let len = JSON.stringify(goodsTitle[i].innerHTML+'').length;
                if(len>13){
                    goodsTitle[i].innerHTML=goodsTitle[i].innerHTML.substring(1,13)+"..."
                }
            }
        }
    }
</script>
<style scoped>
    .buy{
        background: #33c179;
    }
    .add{
        background: #7ed8aa;
    }
    .g_footer_buyOrAdd{
        flex-direction: row;
        flex:1;
    }
    .g_footer_buyOrAdd_{
        font-size: 34px;
        flex:1;
        height:100%;
        text-align: center;
        line-height: 98px;
        font-weight: 300;
        color:white;
    }
    .g_footer_ico_box{
        align-items: center;
    }
    .g_footer_ico_box_text{
        font-size: 26px;
        color:#666;
        line-height: 40px;
        text-align: center;
    }
    .g_footer_ico{
        justify-content: space-around;
        align-items: center;
        flex-direction: row;
        width:320px;
    }
    .g_footer{
        flex-direction: row;
        height:98px;
        box-shadow: 0 -3px 6px #ccc;
    }
    .goods_your_like{
        padding-bottom: 55px;
    }
    .goods_your_like_goods_price{
        position: absolute;
        right:5px;
        bottom:0px;
        font-size: 26px;
        color:#ea3939;
    }
    .goods_your_like_goods_name{
        font-size:26px;
        color:#444;
        font-weight: 300;
        letter-spacing: 5px;
        margin-top:36px;
    }
    .goods_your_like_dbox{
        flex-direction: row;
        overflow: scroll;
    }
    .goods_your_like_goods{
        float: left;
        width:264px;
        margin:0 29px;
        position: relative;
    }
    .goods_your_like_box{
        display: block;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-shrink: 0;
    }
    .goods_your_like_title{
        margin:62px 0 40px;
        text-indent:25px;
        font-size: 30px;
        font-weight: 600;
    }
    .goods_more_info_title{
        font-size: 30px;
        line-height: 126px;
        font-weight: 600;
    }
    .goods_more_info{
        padding:0 25px;
    }
    .shop_more_msg_text_path{
        font-size: 26px;
        color:#666;
        letter-spacing: 2px;
        line-height:40px;
    }
    .shop_more_msg_text_name{
        font-size: 30px;
        color:#333;
        font-weight: 600;
        letter-spacing: 2px;
        line-height: 66px;
    }
    .shop_more_msg_text{
        margin-left:22px;
    }
    .shop_more_msg{
        flex-direction: row;
        /*align-items: center;*/
        padding:0 25px 32px;
        border-bottom: 1px solid #ddd;
    }
    .dpuSee{
        font-size: 30px;
        font-weight: 600;
        color:#40b474;
        margin-right:25px;
    }
    .dpuMsg{
        font-size: 30px;
        color:#333;
        font-weight: 600;
        margin-left:25px;
    }
    .s_title{
        flex-direction: row;
        justify-content: space-between;
        border-top:16px solid #ddd;
        padding-top:20px;
        padding-bottom:60px;
    }
    .g_choose_num{
        padding-left:24px;
        border-bottom:1px solid #ddd;
        font-size: 26px;
        color:#999;
        line-height: 58px;
    }
    .tt1{
        color:#666;
        font-size: 26px;
    }
    .tt2{
        color:#666;
        font-size: 26px;
        text-decoration: line-through;
    }
    .old{
        flex-direction: row;
        margin-left:76px;
    }
    .new{
        color:#ea3939;
        font-size: 34px;
        padding-left:24px;
    }
    .g_price{
        flex-direction: row;
        align-items: center;
        padding-top:32px;
        padding-bottom:24px;
        border-bottom:1px solid #d9d6d6;
    }
    .g_name{
        font-size: 30px;
        color:#333;
        letter-spacing: 3px;
        padding:0 24px;
        margin-top:44px;
        font-weight: 600;
    }
    .m_active{
        color:#33c179;
        border-bottom: 4px solid #33c179;
    }
    .meun{
        line-height: 45px;
        font-size: 32px;
        font-weight: 600;
        margin:0 6px;
        padding:16px;
    }
    .h_meun{
        flex-direction: row;
    }
    .g_header{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
    }
    .g_secer{
        flex:1;
        overflow: hidden;
        overflow-y: scroll;
    }
    .goods{
        height:100%;
        overflow: hidden;
    }
</style>